<template>
  <div>
    <el-upload
      :class="{disabled:uploadDisabled}"
      :action="actionUrl"
      :data="this.formData.uploadData"
      v-model="form.imageCertId"
      :name="formData.fileName"
      :headers="header"
      limit="1"
      :on-remove="handleRemove"
      :on-success="handleAvatarSuccess"
      :on-preview="handlePreview"
      :file-list="imageUrlData"
      :disabled="isDisabled"
      :before-upload="beforeAvatarUpload">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
  import {getToken} from "../../utils/auth";
  import {delDocumentfile} from "../../api/document";

  export default {
    name: "documentfile",
    data() {
      return {
        form: {
          imageCertId: ''
        },
        header: {
          "Authorization": `Bearer ${getToken()}`
        },
        imageUrlData: [],
        fileUrls: [],
        fileList: [],
        isAddBuiness: '',
        businessid: '',
        nationalDialogVisible: false,
        actionUrl: process.env.VUE_APP_BASE_API + '/system/upload',
        formData: {
          fileName: 'file',
          uploadData: {
            name: this.name,
            remark: this.filetype, //用于表示当前操作是图集还是文件上传  file  image
            f1: this.nametype,
          }
        },
      }
    },
    props: {
      name: {
        type: String
      },
      filetype: {
        type: String
      },
      isDisabled: {
        type: Boolean
      },
      nametype: {
        type: String
      },

    },
    methods: {
      uploadDisabled: function () {
        return this.imageUrlData.length > 0
      },
      getFiles() {
        return this.fileUrls;
      },
      clearFiles() {
        this.fileUrls = [];
        this.imageUrlData = [];
      },
      isAddInfoAction(flag) {  //盘点当前业务是新增还是修改
        this.isAddBuiness = flag;
      },
      checkValue: function () {
        return (this.form.imageCertId)
      },
      showFile(imageData, eqsn) {
        this.businessid = eqsn;
        this.imageUrlData = [];
        this.fileUrls = [];
        for (let i = 0; i < imageData.length; i++) {
          let image = imageData[i];
          let obj = {};
          obj.url = process.env.VUE_APP_BASE_API + image.fileurl;
          obj.id = image.id;
          obj.name = image.name;
          this.imageUrlData.push(obj);
          this.form.imageCertId = image.fileurl;
          this.fileUrls.push(image.id)
        }
      },
      //上传文件
      handleAvatarSuccess(res, file) {       //照片成功事件
        let code = res.code;
        let message = res.msg;
        if (code === 200) {
          let imageCerts = res.data;
          this.form.imageCertId = imageCerts.imgUrl;
          this.$message.success(message);
          //  console.log("上传成功后的URL",this.form.imageCertId)
          // if(this.isAddBuiness){
          this.fileUrls.push(imageCerts.id)
          // }
        } else {
          this.$message.error(message);
        }
      },
      beforeAvatarUpload(file) {//照片成功之前的事件
        this.formData.uploadData.businessid = this.businessid;
        const isJPG = file.type === 'video/mp4';
        if (!isJPG) {
          this.$message.error('上传视频只能是 MP4 格式!');
        }
        return isJPG;
      },
      handleRemove(file, fileList) {     //照片删除事件
        delDocumentfile(file.id).then(response => {
          if (response.code === 200) {
            this.form.imageCertId = "";
            this.fileUrls.forEach((item, index) => {
              if (file.id === item) {
                this.fileUrls.splice(index, 1);
              }
            });
            this.$message.success("删除成功");
          }
        });
      },
      handlePictureCardPreview(file) {     //照片中点击文件列表中已上传的文件时的钩子
        this.form.imageCertId = file.url;
        this.nationalDialogVisible = true;
      },
      handlePreview(file) {
        let str = file.url;
        console.log("str=" + str);
        if (str !== undefined) {
          let a = document.createElement('a')
          let path = file.url.lastIndexOf('/')
          a.download = file.url.substr(path + 1)//设置下载的文件名
          a.href = file.url; // 设置图片的下载地址
          a.click();//触发下载事件
        } else {
          document.location.href = file.url
        }
      },
    }
  }
</script>


